<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../plugins/incubator-echarts-4.9.0/dist/echarts.js"></script>
    <script src="../../plugins/incubator-echarts-4.9.0/dist/echarts.esm.js"></script>
    <script src="../../plugins/incubator-echarts-4.9.0/dist/echarts.common.js"></script>
    <script src="../../plugins/incubator-echarts-4.9.0/dist/echarts.min.js"></script>
    <script src="../../plugins/incubator-echarts-4.9.0/dist/echarts.simple.min.js"></script>
    <script src="../../plugins/incubator-echarts-4.9.0/dist/ecStat.min.js"></script>
    <script src="../../plugins/incubator-echarts-4.9.0/dist/echarts-gl.min.js"></script>
    <script src="../../plugins/incubator-echarts-4.9.0/dist/dataTool.min.js"></script>
    <script src="../../plugins/incubator-echarts-4.9.0/dist/extension/bmap.min.js"></script>
</head>
<body style="height: 100%;margin: 0">

<div id="app">
    <label>选择好医院:</label>
    <el-select v-model="massage" filterable placeholder="孙泰和和平馆" @change="selectImages">
        <el-option
                v-for="item in keshidata"
                :key="item.id"
                :label="item.hosName"
                :value="item.id">
        </el-option>
    </el-select>
    <label>按照科室区分:</label>
    <el-select v-model="massage2" filterable placeholder="中医内科" @change="selectImages2">
        <el-option
                v-for="item in keshidata2"
                :key="item.id"
                :label="item.depName"
                :value="item.id">
        </el-option>
    </el-select>
</div>
<div id="container" style="height: 90%"></div>
<script src="../../js/vue.js"></script>
<script src="../../js/axios.min.js"></script>
<link rel="stylesheet" href="../../plugins/element_UI/index.css">
<script src="../../plugins/element_UI/index.js"></script>
<!--<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/echarts.min.js"></script>-->
<!--<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@1/dist/echarts-gl.min.js"></script>-->
<!--<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@1/dist/ecStat.min.js"></script>-->
<!--<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/extension/dataTool.min.js"></script>-->
<!--<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/map/js/china.js"></script>-->
<!--<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/map/js/world.js"></script>-->
<!--<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/extension/bmap.min.js"></script>-->
<script type="text/javascript">


    var myChart = echarts.init(document.getElementById('container'));
    option = {
        title: {
            text: '医生预约量'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: []
        },
        grid: {
            left: '3%',
            right: '4%',
            top: '10%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [

        ]
    };

    // myChart.setOption(option);
    // 使用刚指定的配置项和数据显示图表。
    // myChart.setOption(option);

    let app1=new Vue({
        el:'#app',
        data(){
            return{
                keshidata:[],
                keshidata2:[],
                so: [],
                ho:[],
                hospitalId:57172,
                massage:'',
                massage2:'',
                depId:86000067
            }
        },
        methods: {
            unique(arr) {
                var newArr = [];
                for (var i = 0; i < arr.length; i++) {
                    for (var j = i + 1; j < arr.length; j++) {
                        if (arr[i] == arr[j]) {
                            ++i;
                        }
                    }
                    newArr.push(arr[i]);
                }
                return newArr;
            },
            selectImages:function(val){
                this.getdata(val);
                this.xlala2(val);
            },
            getdata:function(val){
                this.hospitalId=val;
                console.log(val)
            },
            selectImages2:function(val){
                this.getdata2(val);
                option.series=[];
                this.ma();
            },
            getdata2:function(val){
                this.depId=val;
                console.log(val)
            },
            xlala:function () {
                let that=this
                that.loadling=false
                axios.post("http://"+window.location.host+'/hospital/select_list',{}).then(res=>{
                    that.keshidata=res.data.data;
                    console.log(that.keshidata)
                }).catch((e)=>{
                    alert('数据获取失败');
                })
            },
            xlala2:function (val) {
                let that=this
                that.loadling=false
                axios.post("http://"+window.location.host+'/pubDepartments/selectOption',{hospitalId:this.hospitalId}).then(res=>{
                    that.keshidata2=res.data.data;
                    console.log(that.keshidata2)
                }).catch((e)=>{
                    alert('数据获取失败');
                })
            },
            ma: function () {
                let that = this
                that.loading = false
                axios.post("http://" + window.location.host + '/ordAppointment/selectStatisDoctor', {depId:this.depId}).then(res => {
                    that.so = res.data.data;
                    //['名字1',1,2,3,4,5,6,7]
                    //医馆编号数组,时间数组
                    var Name=new Array();
                    var dates=new Array();
                    for (var i=0;i<that.so.length;i++){
                        Name.push(that.so[i].docname);
                        dates.push(that.so[i].date);
                    }
                    // console.log("去重前："+JSON.stringify(Name));
                    // console.log("去重前："+JSON.stringify(dates));

                    var hisNew = that.unique(Name);
                    var datesNew = that.unique(dates);

                    // console.log("去重后："+JSON.stringify(hisNew));
                    // console.log("去重后："+JSON.stringify(datesNew));
                    var old2=new Array();
                    for(var g=0;g<datesNew.length;g++){
                        old2.push(datesNew[g]);
                    }
                    for (var i=0;i<hisNew.length;i++){
                        var olds = {};
                        olds.name = hisNew[i];
                        olds.type = "line";
                        var data =new Array();
                        for (var k=0;k<that.so.length;k++){
                            for(var j=0;j<dates.length;j++){
                                if (hisNew[i]==that.so[k].docname&&dates[j]==that.so[k].date){
                                    data.push(that.so[k].num);
                                    break;
                                }
                            }
                        }
                        olds.data = data;
/*                        console.log(data)*/
                        option.xAxis.data=old2;
                        option.legend.data=olds.name
                        option.series.push(olds)
                    }
                    myChart.setOption(option);
                }).catch((e) => {
                    alert('未获取到数据')
                })
            },
            position: function (point, params, dom, rect, size) {
                // 固定在顶部
                return [point[0], '10%'];
            },
        },mounted:function(){
            this.ma();
            this.xlala();
            this.xlala2();
        }
    })
</script>
</body>